<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="设备监控—低压配电系统"></Header>

    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top">
          <div class="box-tit">
            <span>变压器总路线</span>
          </div>
          <div class="box-con">
            <div class="con" style="display: flex; justify-content:center;">
              <img src="../../../assets/img/erweima.png" alt="" />
            </div>
          </div>
        </div>
        <div id="left-center">
          <div class="box-tit">
            <span>支路信息</span>
          </div>
          <div class="box-con">
            <div class="con">
              <div class="xxxx">
                <ul class="list-m">
                  <li class="list-p">
                    <label>设计容量</label>
                    <span>1250KV</span>
                  </li>
                  <li class="list-p">
                    <label>负荷名称</label>
                    <span>1#变压总进线</span>
                  </li>
                  <li class="list-p">
                    <label>电源类型</label>
                    <span>300V</span>
                  </li>
                  <li class="list-p">
                    <label>线缆起点</label>
                    <span>高压室1#变压器出线柜</span>
                  </li>
                  <li class="list-p">
                    <label>线缆终点</label>
                    <span>高压室1#变压器进线柜</span>
                  </li>
                  <li class="list-p">
                    <label>线缆规模</label>
                    <span>20*5铜排</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div id="left-bottom">
          <div class="box-tit">
            <span>抄表参数</span>
          </div>
          <div class="box-con">
            <div class="con">
              <div class="zb">
                <Etwo2 ref="Etwo2"></Etwo2>
              </div>

              <!-- <Bowen ref="Bowen"></Bowen> -->
            </div>
          </div>
        </div>
      </section>
      <section class="screen-middle">

        <div id="middle-top">
          <div class="box-tit">
            <span>实时能耗</span>

            <div class="tab">
              <span class="btn" v-for="(item, index) in filterData.navTab" :key="index" :class="{ active: currentSort == index }" @click="active(index)">
                {{ item }}
              </span>
            </div>
          </div>
          <div class="box-con">
            <div class="con">
              <div class="sshn-box">
                <dline :isRefresh="isRefresh" style="z-index: 5" />
                <div class="bjt"></div>
              </div>
              <div class="sshn_list_tree">
                <div class="list-t">单位：kwh</div>
                <ul>
                  <li>

                    <div class="list-r">
                      <p class="num-t">
                        <count-to :startVal="100" :endVal="1568.08" :duration="3000"></count-to>
                        kwh
                      </p>
                      <p class="num-b">
                        <span>同比 <small>25 <b>↑</b></small></span>
                        <span>环比 <small>25 <b>↓</b></small></span>
                      </p>
                    </div>
                  </li>
                  <li>

                    <div class="list-r">
                      <p class="num-t">
                        <span>
                          <count-to :startVal="100" :endVal="1568.08" :duration="3000"></count-to>
                        </span>
                        kwh
                      </p>
                      <p class="num-b">
                        <span>同比 <small>25 <b>↑</b></small></span>
                        <span>环比 <small>25 <b>↓</b></small></span>
                      </p>
                    </div>
                  </li>

                </ul>
              </div>
            </div>
          </div>
        </div>

        <div id="middle-bottom">
          <div id="middle-bottom-center">
            <div id="middle-bottom-left">
              <Bowen ref="Bowen"></Bowen>
            </div>

            <div id="middle-bottom-right">
              <Bowen2 ref="Bowen2"></Bowen2>
            </div>
          </div>
        </div>

      </section>
      <!-- 右边部分 -->
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Dprs from "@/components/Dprs.vue";
import Ethree from "@/components/Ethree.vue";
import Efour from "@/components/Efour.vue";
import Eone from "@/components/Eone.vue";
import Etwo2 from "@/components/Etwo2.vue";
import dline from "@/components/dline.vue";
import dlines from "@/components/dlines.vue";
import Bowen from "../../../components/Bowen.vue";
import Bowen2 from "../../../components/Bowen2.vue";

import moment from "moment";

export default {
  components: {
    Header,
    dline,
    Dprs,
    Ethree,
    Efour,
    Eone,
    Etwo2,
    dlines,
    Bowen,
    Bowen2,
  },

  data() {
    return {
      filterData: {
        navTab: ["电", "水"],
      },
      currentSort: 0,
      totalEnergy: 1568, // 总能耗
      electricity: 2000, // 电
      water: 1000, // 水
      isRefresh: Date.now(),
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    active(index) {
      this.currentSort = index;
      this.isRefresh = Date.now();
    },
  },
};
</script>
<style lang="less" scoped>
.bg {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .screen-left {
    height: 100%;
    width: 22.6%;
    #left-top {
      height: 24%;
      min-height: 258px;
      margin-bottom: 10px;
      position: relative;
    }
    #left-center {
      height: 35%;
      min-height: 377px;
      position: relative;
      .box-con {
        height: 322px;
        .con {
          height: 306px;
        }
      }
    }
    #left-bottom {
      height: 29%;
      min-height: 323px;
      position: relative;
      z-index: 5;
      .box-con {
        height: 269px;
        .con {
          height: 253px;
        }
      }
    }
  }
  .screen-middle {
    height: 100%;
    width: 80%;
    margin-left: 0.6%;
    margin-right: 0.6%;

    #middle-top {
      width: 100%;
      height: 41.6%;
      position: relative;
      top: 15px;
      left: 0px;

      display: flex;
      flex-direction: column;
      .box-con {
        height: 269px;
        background: url("../../../assets/img/box_center.png") no-repeat;
        background-size: 100% 100%;
        .con {
          height: 253px;
          background: rgba(31, 48, 77, 0.2);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .sshn-box {
            width: 72%;
            height: inherit;
            position: relative;
            z-index: 666;
            .bjt {
              position: absolute;
              width: 90%;
              height: 100%;
              overflow: hidden;
              display: flex;
              align-items: center;
              background: url("../../../assets/img/bjt.png");
              background-size: 100% 100%;
              top: 15px;
              left: 8%;
              z-index: 1;
            }
          }

          .sshn_list_tree {
            width: 28%;
            height: inherit;
            .list-t {
              font-size: 14px;
              color: #567db6;
              height: 26px;
              display: flex;
              justify-content: flex-end;
              padding-right: 20px;
              align-items: flex-end;
            }
          }
        }
      }
    }
  }

  .box-tit {
    height: 40px;
    line-height: 29px;
    width: 100%;
    font-size: 14px;
    color: #b8f9ff;
    padding-left: 39px;
    background: url("../../../assets/img/box-top.png") no-repeat;
    box-sizing: border-box;
    display: flex;
    .tab {
      width: 100px;
      margin-left: 10px;

      .btn {
        background: #1d2a4f;
        color: #00beff;
        width: 34px;
        display: inline-block;
        height: 20px;
        border-radius: 3px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
      }
      .active {
        background: #567db6 !important;
        color: #fff !important;
      }
    }
  }
  .box-con {
    height: 211px;
    width: 100%;
    padding: 6px 0 6px 10px;
    box-sizing: border-box;
    background: url("../../../assets/img/box-bot.png") no-repeat;
    background-size: 100% 100%;
    .con {
      height: 197px;
      background: rgba(31, 48, 77, 0.2);

      justify-content: space-between;
      .box-con-l {
        width: 50%;
      }
      .box-con-r {
        width: 50%;
      }
    }
    .hn_list_tree {
      width: 100%;
      height: inherit;
      ul {
        padding: 20px;
        height: inherit;
        li {
          height: 33.333%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .list-l {
            width: 17%;
            text-align: right;
            display: inline-block;
            color: #567db6;
            font-size: 16px;
          }
          // .list-c {
          // }
          .list-r {
            width: 52%;
            height: 64px;
            display: flex;
            flex-direction: column;
            .num-t {
              color: #b3b3b3;
              font-size: 12px;
              height: 40px;
              span {
                color: #567db6;
                font-size: 25px;
              }
            }
            .num-b {
              color: #b3b3b3;
              font-size: 12px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              span {
                color: #b3b3b3;
                font-size: 12px;
                width: 50%;

                &:first-child small {
                  margin-left: 10px;
                  color: #00fbfc;
                }
                &:last-child small {
                  margin-left: 10px;
                  color: #ff4040;
                }
              }
            }
          }
        }
      }
    }

    .sshn_list_tree {
      width: 28%;
      height: inherit;
      ul {
        height: inherit;
        li {
          height: 64px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 97%;
          background: rgba(31, 48, 77, 0.2);
          &:nth-child(2) {
            margin: 60px 0;
          }
          .list-c {
            padding-left: 21px;
            padding-top: 8px;
          }
          .list-r {
            width: 68%;
            height: 64px;
            display: flex;
            flex-direction: column;
            .num-t {
              color: #b3b3b3;
              font-size: 12px;
              span {
                color: #567db6;
                font-size: 22px;
                display: inline-block;
                line-height: 40px;
              }
            }
            .num-b {
              color: #b3b3b3;
              font-size: 12px;
              display: flex;
              align-items: center;
              span {
                color: #b3b3b3;
                font-size: 12px;
                width: 43%;

                &:first-child small {
                  color: #00fbfc;
                }
                &:last-child small {
                  color: #ff4040;
                }
              }
            }
          }
        }
      }
    }

    .qx_list_tree {
      width: 100%;
      height: inherit;
      ul {
        padding: 20px;
        height: inherit;
        li {
          &:first-child {
            height: 25px;
            .list-l {
              width: 23.5%;
              text-align: right;
              display: inline-block;
              color: #567db6;
              font-size: 16px;
            }
            .list-r {
              width: 45%;
              color: #567db6;
              font-size: 14px;
            }
          }
          &:last-child {
            height: 25px;
            font-size: 14px;
            color: #567db6;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          height: 71.333%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .list-l {
            text-align: right;
            display: inline-block;
            color: #567db6;
            font-size: 16px;
            width: 50%;
            padding-right: 19px;
          }
          .list-r {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 53%;
            font-size: 49px;
            font-weight: 600;
            color: #567db6;
          }
        }
      }
    }
  }
}

.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

.list-m {
  display: flex;
  flex-direction: column;
}
label {
  display: inline-block;
  width: 50%;
  text-align: 0 !important;
  line-height: 50px;
  color: #ffff;
  margin-left: 20px;
}
// #left-bottom .box-con .con {
//     padding-left: 93px;
// }

#middle-bottom {
  background: url("../../../assets/img/box-bot.png") no-repeat;
  background-size: 100% 100%;
  height: 536px;
}
#middle-bottom-center {
  display: flex;
  // justify-content: space-between;
  // align-items: center;
  height: 536px;
  background: rgba(31, 48, 77, 0.2);
}
#middle-bottom-left {
  // height: 536px;
  // background: rgba(31, 48, 77, 0.2);

  // width: 720px;
  // width: 72%;
  height: inherit;
  position: relative;
}
#middle-bottom-right {
  //    width: 28%;
  height: inherit;
}
.zb {
  width: 400px;
  height: 250px;
  padding-left: 119px;
}
</style>

 